﻿<%@ Page Title="" Language="C#" MasterPageFile="~/MasterPage/NoRightAd.Master" AutoEventWireup="true" 
    CodeBehind="PostForSalePreview.aspx.cs" Inherits="Foothill.Web.PostForSalePreview" EnableEventValidation="false" ValidateRequest="false" %>
    
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxToolkit" %>
<%@ Register Assembly="CKEditor.NET" Namespace="CKEditor.NET" TagPrefix="CKEditor" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
    <link rel="stylesheet" href="post-common.css" type="text/css" />
    <link rel="stylesheet" href="preview.css" type="text/css" /> 
    <script type="text/javascript">
        var BlankImageSrc = '../Images/space.gif';

        $(document).ready(function () {
            $('div.showcase').droppable({
                accept: 'img.upload-img',
                hoverClass: "ui-state-active",
                drop: handleCarDrop,
                over: dragOver,
                out: dragOut
            });

            $('img.upload-img').draggable({ revert: true, zIndex: 99, cursor: "move" });

            $('span.del-span').click(function () {
                var div = $(this).parent();
                removeUploadedPhoto(div);
            });
        });

        function isImageEmpty(currentImage) {
            return currentImage === '' || currentImage == null || currentImage == BlankImageSrc;
        }

        function extractFilename(imgUrl) {
            var fileNameIndex = imgUrl.lastIndexOf("/") + 1;
            var filename = imgUrl.substr(fileNameIndex);
            return filename;
        }

        function removeUploadedPhoto(div) {
            var img = div.find('img.upload-img');
            var imgUrl = img.attr('src');

            if (!isImageEmpty(imgUrl)) {
                var filename = extractFilename(imgUrl);
                filename = filename.substring(0, filename.lastIndexOf('.'));

                $.ajax({
                    type: "POST",
                    url: "PostForSalePreview.aspx/DeleteUploadedPhoto",
                    data: '{"filenameNoExt": "' + filename + '"}',
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    success: function (data, status) {
                        if (data.d >= 0) {
                            var divId = div.attr('id');
                            var number = divId.split('-')[1];

                            var img = div.find('img.upload-img');
                            img.attr('src', BlankImageSrc);
                            $('#imgBtn_' + number).hide();
                        }
                    }
                });
            }
        }

        function dragOver(event, ui) {
            var imgOver = $(this).find('img.upload-img');
            if (imgOver == null) {
                return;
            }

            var overImgSrc = imgOver.attr('src');
            if (!isImageEmpty(overImgSrc)) {
                $(this).addClass('drag-hover');
            }
        }

        function dragOut(event, ui) {
            $(this).removeClass('drag-hover');
        }

        function handleCarDrop(event, ui) {
            var imgDroppedOn = $(this).find('img.upload-img');

            if (imgDroppedOn == null) {
                return;
            }

            // get src of the img dropped on
            var droppedOnImgSrc = imgDroppedOn.attr('src');

            if (!isImageEmpty(droppedOnImgSrc)) {
                var draggedImgSrc = ui.draggable.attr('src');
                ui.draggable.attr('src', droppedOnImgSrc);
                imgDroppedOn.attr('src', draggedImgSrc);
                $(this).removeClass('drag-hover');
            }
        }

        // Add click handlers for buttons to show and hide modal popup on pageLoad 
        function pageLoad() {
            $addHandler($get("hideEditPhotoPopupViaClientButton"), 'click', hideEditPhotoModalPopupViaClient);
            $addHandler($get("hideEditPostPopupViaClientButton"), 'click', hideEditPostModalPopupViaClient);
        }

        function hideEditPhotoModalPopupViaClient(ev) {
            ev.preventDefault();
            var modalPopupBehavior = $find('mpe1Behavior');
            modalPopupBehavior.hide();
            saveEditPhoto();
            $('#btnSaveEditPhoto').click();
        }

        function hideEditPostModalPopupViaClient(ev) {
            ev.preventDefault();
            var modalPopupBehavior = $find('mpeEditPostBehavior');
            modalPopupBehavior.hide();
        }

        function saveEditPhoto() {
            var cars = new Array();
            var number;
            for (var i = 0; i < 16; ++i) {
                number = i + 1;
                var backImage = $('#img_' + number).attr('src');
                if (!isImageEmpty(backImage)) {
                    cars.push(extractFilename(backImage));
                }
            }

            if (cars.length == 0) {
                return;
            }

            var jsonText = JSON.stringify({ list: cars });

            $.ajax({
                type: "POST",
                url: "PostForSalePreview.aspx/SaveEditPhotoChanges",
                data: jsonText,
                contentType: "application/json; charset=utf-8",
                dataType: "json"
            });
        }
    
    </script>
 
</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="cph1" runat="server">
    
    <ajaxToolkit:ToolkitScriptManager runat="Server" ID="ScriptManager1" />
    
    <div id="preview-ad">      
        <div id="post-ad-top">
            <table class="post-ad-steps">
                <tr>
                    <td><span class="step-num other-step-num">1</span>基本信息</td>
                    <td><span class="step-num other-step-num">2</span>添加照片</td>
                    <td class="current-step"><span class="step-num current-step-num">3</span>预览发布</td>
                </tr>
            </table> 
            
            <div id="edit-buttons">
                <asp:Button ID="btnEditPhotos" runat="server" Text="编辑照片" OnClick="btnEditPhotos_Click" CssClass="edit-button" /> 
                <asp:Button ID="btnEditAdInfo" runat="server" Text="编辑内容" OnClick="btnEditAdInfo_Click" CssClass="edit-button" />   
            </div>
        </div>
        
        <div>
            <div id="preview-top">
                <asp:UpdatePanel ID="udpPostInfo" runat="server" UpdateMode="Conditional" ClientIDMode="Static"  >  
                    <ContentTemplate>
                        <div>
                            <asp:Label ID="lblVehicleType" runat="server" class="ad-vehicle-title"/> 
                            <asp:Label ID="lblPrice" runat="server" CssClass="vehicle-price" />
                        </div>
                        
                        <div id="ad-info">
                            <table id="tbl-ad-detail">
                                <tr>
                                    <td class="td-label">
                                        <asp:Label ID="lblCondition" runat="server" Text="车况:" />
                                    </td>
                                    <td class="td-content">
                                        <asp:Label ID="lblConditionValue" runat="server" />
                                    </td> 
                                    <td class="td-label">
                                        <asp:Label ID="lblTransmission" runat="server" Text="传动:" />
                                    </td>
                                    <td class="td-content">
                                        <asp:Label ID="lblTransmissionValue" runat="server" />                              
                                    </td>  
                                </tr>
                                <tr>
                                    <td class="td-label">
                                        <asp:Label ID="lblListingType" runat="server" Text="卖家:" />    
                                    </td>
                                    <td class="td-content">
                                        <asp:Label ID="lblListingTypeValue" runat="server" /> 
                                    </td> 
                                    <td class="td-label">
                                        <asp:Label ID="lblPostDate" runat="server" Text="发布时间:" />    
                                    </td>
                                    <td class="td-content">
                                        <asp:Label ID="lblPostDateValue" runat="server" />
                                    </td> 
                                </tr>              
                            </table>
               
                            <div id="ad-description">
                                <asp:Label ID="lblDescriptionDetail" runat="server" CssClass="display-ad-description" />
                            </div>
                        </div>
                    </ContentTemplate>
                </asp:UpdatePanel> 
                <div id="ad-photos">
                    <asp:UpdatePanel ID="udpPhotos" runat="server" UpdateMode="Conditional">
                        <ContentTemplate>
                            <div id="profile-photo">
                                <asp:HyperLink ID="hlkProfilePhoto" runat="server" Target="_blank">
                                    <asp:Image ID="imgProfile" runat="server" CssClass="profile-img" />
                                </asp:HyperLink>
                            </div>

                            <div id="photo-list">
                                <asp:DataList ID="dltPhotos" runat="server" RepeatColumns="8" RepeatDirection="Horizontal" ShowHeader="false"
                                    OnItemCreated="dltPhotos_OnItemCreated" CssClass="preview-ad-dltPhotos" DataKeyField="PathOnServer">
                                    <ItemTemplate>
                                        <asp:ImageButton ID="btnThumbnail" runat="server" CssClass="detail-img-thumbnail" OnClick="btnThumbnail_Click" />
                                    </ItemTemplate>
                                </asp:DataList>
                            </div>
                        </ContentTemplate>
                    </asp:UpdatePanel>

                    <asp:Button runat="server" ID="btnHiddenShowModalPopup" Style="display: none" />

                    <asp:Panel runat="server" ID="programmaticPopup" Style="display: none; min-height: 580px; background: white;">                       
                        <asp:UpdatePanel ID="udpEditPhotos" runat="server" UpdateMode="Conditional" ClientIDMode="Static">
                            <ContentTemplate>
                                <asp:Panel runat="Server" ID="pnlEditPhotosHandle" CssClass="PopupDragHandle">
                                    <a class="btn-close-edit">
                                        <img id="hideEditPhotoPopupViaClientButton" src="../Images/icons/close1.png" alt="X" />
                                    </a>
                                </asp:Panel>

                                <div id="edit-photos-inner">
                                    <div id="td-1" class="showcase">
                                        <asp:Label ID="imgBtn_1" runat="server" CssClass="del-span" ClientIDMode="Static" />
                                        <asp:Image ID="img_1" runat="server" class="upload-img" ClientIDMode="Static" />
                                    </div>
                                    <div id="td-2" class="showcase">
                                        <asp:Label ID="imgBtn_2" runat="server" CssClass="del-span" ClientIDMode="Static" />
                                        <asp:Image ID="img_2" runat="server" class="upload-img" ClientIDMode="Static" />
                                    </div>
                                    <div id="td-3" class="showcase">
                                        <asp:Label ID="imgBtn_3" runat="server" CssClass="del-span" ClientIDMode="Static" />
                                        <asp:Image ID="img_3" runat="server" class="upload-img" ClientIDMode="Static" />
                                    </div>
                                    <div id="td-4" class="showcase">
                                        <asp:Label ID="imgBtn_4" runat="server" CssClass="del-span" ClientIDMode="Static" />
                                        <asp:Image ID="img_4" runat="server" class="upload-img" ClientIDMode="Static" />
                                    </div>

                                    <div class="clear"></div>

                                    <div id="td-5" class="showcase">
                                        <asp:Label ID="imgBtn_5" runat="server" CssClass="del-span" ClientIDMode="Static" />
                                        <asp:Image ID="img_5" runat="server" class="upload-img" ClientIDMode="Static" />
                                    </div>
                                    <div id="td-6" class="showcase">
                                        <asp:Label ID="imgBtn_6" runat="server" CssClass="del-span" ClientIDMode="Static" />
                                        <asp:Image ID="img_6" runat="server" class="upload-img" ClientIDMode="Static" />
                                    </div>
                                    <div id="td-7" class="showcase">
                                        <asp:Label ID="imgBtn_7" runat="server" CssClass="del-span" ClientIDMode="Static" />
                                        <asp:Image ID="img_7" runat="server" class="upload-img" ClientIDMode="Static" />
                                    </div>
                                    <div id="td-8" class="showcase">
                                        <asp:Label ID="imgBtn_8" runat="server" CssClass="del-span" ClientIDMode="Static" />
                                        <asp:Image ID="img_8" runat="server" class="upload-img" ClientIDMode="Static" />
                                    </div>

                                    <div class="clear"></div>

                                    <div id="td-9" class="showcase">
                                        <asp:Label ID="imgBtn_9" runat="server" CssClass="del-span" ClientIDMode="Static" />
                                        <asp:Image ID="img_9" runat="server" class="upload-img" ClientIDMode="Static" />
                                    </div>
                                    <div id="td-10" class="showcase">
                                        <asp:Label ID="imgBtn_10" runat="server" CssClass="del-span" ClientIDMode="Static" />
                                        <asp:Image ID="img_10" runat="server" class="upload-img" ClientIDMode="Static" />
                                    </div>
                                    <div id="td-11" class="showcase">
                                        <asp:Label ID="imgBtn_11" runat="server" CssClass="del-span" ClientIDMode="Static" />
                                        <asp:Image ID="img_11" runat="server" class="upload-img" ClientIDMode="Static" />
                                    </div>
                                    <div id="td-12" class="showcase">
                                        <asp:Label ID="imgBtn_12" runat="server" CssClass="del-span" ClientIDMode="Static" />
                                        <asp:Image ID="img_12" runat="server" class="upload-img" ClientIDMode="Static" />
                                    </div>

                                    <div class="clear"></div>

                                    <div id="td-13" class="showcase">
                                        <asp:Label ID="imgBtn_13" runat="server" CssClass="del-span" ClientIDMode="Static" />
                                        <asp:Image ID="img_13" runat="server" class="upload-img" ClientIDMode="Static" />
                                    </div>
                                    <div id="td-14" class="showcase">
                                        <asp:Label ID="imgBtn_14" runat="server" CssClass="del-span" ClientIDMode="Static" />
                                        <asp:Image ID="img_14" runat="server" class="upload-img" ClientIDMode="Static" />
                                    </div>
                                    <div id="td-15" class="showcase">
                                        <asp:Label ID="imgBtn_15" runat="server" CssClass="del-span" ClientIDMode="Static" />
                                        <asp:Image ID="img_15" runat="server" class="upload-img" ClientIDMode="Static" />
                                    </div>
                                    <div id="td-16" class="showcase">
                                        <asp:Label ID="imgBtn_16" runat="server" CssClass="del-span" ClientIDMode="Static" />
                                        <asp:Image ID="img_16" runat="server" class="upload-img" ClientIDMode="Static" />
                                    </div>

                                </div>
              
                                <div id="preview-editphoto-btns">
                                    <asp:Button runat="server" ID="btnSaveEditPhoto" Text="保存" ClientIDMode="Static" OnClick="btnSaveEditPhotoClick" OnClientClick="saveEditPhoto()" />
                                </div>
                            </ContentTemplate>
                        </asp:UpdatePanel>
                    </asp:Panel>
                    
                    <ajaxToolkit:ModalPopupExtender runat="server" ID="mpe1"
                        BehaviorID="mpe1Behavior"
                        TargetControlID="btnHiddenShowModalPopup"
                        PopupControlID="programmaticPopup" 
                        BackgroundCssClass="modalBackground"
                        DropShadow="True"
                        PopupDragHandleControlID="pnlEditPhotosHandle"
                        RepositionMode="RepositionOnWindowScroll" >
                    </ajaxToolkit:ModalPopupExtender>
                </div>
       
                <asp:Panel runat="server" ID="pnlEditPost" style="display:none;width:650px;min-height:280px;background:white;">            
                    <asp:Panel runat="Server" ID="pnlEditPostHandle" CssClass="PopupDragHandle">
                        <a class="btn-close-edit">
                            <img id="hideEditPostPopupViaClientButton" src="../Images/icons/close1.png" alt="X" />
                        </a>
                    </asp:Panel>
                    <asp:UpdatePanel ID="UpdatePanel1" runat="server" >
                        <ContentTemplate>               
                            <table class="tbl-edit-post">
                                <tr>
                                    <td class="td-label">
                                        <span class="quick-detail-lbl">车型:</span>
                                    </td>
                                    <td class="td-content">
                                        <asp:DropDownList ID="ddlYear" runat="server" />  
                                        <asp:DropDownList ID="ddlMake" runat="server" CssClass="ddlMakeEdit" AutoPostBack="true" OnSelectedIndexChanged="ddlMake_OnSelectedIndexChanged" /> 
                                        <asp:DropDownList ID="ddlModel" runat="server" CssClass="ddlModelEdit" />   
                                    </td>
                                </tr>
                                <tr>
                                    <td class="td-label">
                                        <span class="quick-detail-lbl">价格:</span>
                                    </td>
                                    <td>
                                        <asp:TextBox ID="txtPrice" runat="server" CssClass="price-input" />
                                        <asp:Label ID="lblPriceValidation" runat="server" CssClass="post-ad-validation" />
                                    </td>
                                </tr>
                                <tr>
                                    <td class="td-label">
                                        <span class="quick-detail-lbl">里程:</span>
                                    </td>
                                    <td>
                                        <asp:TextBox ID="txtMileAgeValue" runat="server" CssClass="price-input" />  
                                        <asp:Label ID="lblMileAgeValidation" runat="server" CssClass="post-ad-validation" /> 
                                    </td>
                                </tr>
                                <tr>
                                    <td class="td-label">
                                        <span class="quick-detail-lbl">车况:</span>
                                    </td>
                                    <td>
                                        <asp:RadioButton ID="rbtNew" runat="server" GroupName="vehicleCondition" Text="全新" />
                                        <asp:RadioButton ID="rbtUsed" runat="server" GroupName="vehicleCondition" Text="二手" />
                                    </td>
                                </tr>
                                <tr>
                                    <td class="td-label">
                                        <span class="quick-detail-lbl">传动:</span>
                                    </td>
                                    <td class="td-content">
                                        <asp:RadioButton ID="rbtAutomatic" runat="server" GroupName="vehicleTransmission" Text="自动" />
                                        <asp:RadioButton ID="rbtStandard" runat="server" GroupName="vehicleTransmission" Text="手动" />
                                    </td>
                                </tr>
                                <tr>
                                    <td class="td-label">
                                        <span class="quick-detail-lbl">卖家:</span>
                                    </td>
                                    <td class="td-content">
                                        <asp:RadioButton ID="rbtOwner" runat="server" GroupName="ListingType" Text="车主" />
                                        <asp:RadioButton ID="rbtDealer" runat="server" GroupName="ListingType" Text="车行" /> 
                                    </td> 
                                </tr>
                                <tr>
                                    <td class="td-label">
                                        <span class="quick-detail-lbl">联系人:</span>
                                    </td>  
                                    <td class="td-content">
                                        <asp:TextBox ID="tbxContactName" runat="server" CssClass="price-input" />
                                    </td>   
                                </tr>
                                <tr>
                                    <td class="td-label">
                                        <span class="quick-detail-lbl">电话:</span>   
                                    </td>
                                    <td class="td-content">
                                        <asp:TextBox ID="txtPhoneNumber" runat="server" CssClass="price-input" />
                                    </td>    
                                </tr>
                                <tr>
                                    <td class="td-label">
                                        <span class="quick-detail-lbl">Email:</span>     
                                    </td>
                                    <td class="td-content">
                                        <asp:TextBox ID="txtEmail" runat="server" CssClass="price-input" />
                                        <asp:Label ID="lblEmailValidation" runat="server" CssClass="post-ad-validation" />  
                                    </td>    
                                </tr>
                                <tr>
                                    <td class="td-label">
                                        <span class="quick-detail-lbl">城市:</span> 
                                    </td>
                                    <td class="td-content">
                                        <asp:DropDownList ID="ddlCity" runat="server" CssClass="ddlMakeEdit" /> 
                                    </td>    
                                </tr>
                                <tr>
                                    <td colspan="3">
                                        <asp:TextBox ID="txtDescriptionDetail" runat="server" CssClass="edit-ad-description" TextMode="MultiLine" Rows="8" /> 
                                        <ajaxToolkit:HtmlEditorExtender ID="hee1" runat="server" TargetControlID="txtDescriptionDetail" 
                                            DisplaySourceTab="False" EnableSanitization="false">
                                            <Toolbar> 
                                                <ajaxToolkit:Bold />
                                                <ajaxToolkit:Italic />
                                                <ajaxToolkit:Underline />
                                                <ajaxToolkit:ForeColorSelector />
                                            </Toolbar>
                                        </ajaxToolkit:HtmlEditorExtender>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <asp:Label ID="lblDescriptionValidation" runat="server" CssClass="post-ad-validation" />
                                    </td>
                                </tr>
                            </table>                      
                            <div id="edit-post-save">
                                <asp:Button runat="server" ID="btnSaveEditChanges" Text="保存" OnClick="btnSaveEditChanges_Click" />    
                            </div>
                        </ContentTemplate>
                    </asp:UpdatePanel>              
                </asp:Panel>
            
                <ajaxToolkit:ModalPopupExtender runat="server" ID="mpeEditPost"
                    BehaviorID="mpeEditPostBehavior"
                    TargetControlID="btnHiddenShowModalPopup"
                    PopupControlID="pnlEditPost" 
                    BackgroundCssClass="modalBackground"
                    DropShadow="True"
                    PopupDragHandleControlID="pnlEditPostHandle"
                    RepositionMode="RepositionOnWindowScroll" >
                </ajaxToolkit:ModalPopupExtender>                                  
            </div>
         
            <div id="post-user-info">
                <asp:UpdatePanel ID="udpUserInfo" runat="server" UpdateMode="Conditional" >  
                    <ContentTemplate>
                        <asp:Panel ID="pnlUnregisteredUser" runat="server">
                            <table class="tbl-user-info">
                                <tr>
                                    <td>联系人:</td>
                                    <td><asp:Label ID="lblAnonymousContact" runat="server" /></td>
                                </tr>
                                <tr>
                                    <td>电话:</td>
                                    <td><asp:Label ID="lblAnonymousPhone" runat="server" /></td>
                                </tr>
                                <tr>
                                    <td>Email:</td>
                                    <td><asp:Label ID="lblAnonymousEmail" runat="server" /></td>
                                </tr>
                                <tr>
                                    <td>城市:</td>
                                    <td><asp:Label ID="lblAnonymousCity" runat="server" /></td>
                                </tr>
                            </table>
                        </asp:Panel>
                        <asp:Panel ID="pnlRegisteredUser" runat="server">
                            <table class="tbl-user-info">
                                <tr>
                                    <td colspan="2">
                                        <asp:Image ID="imgUserProfile" runat="server" CssClass="imgUserProfile" />   
                                    </td>
                                </tr>
                                <tr>
                                    <td colspan="2">
                                        <asp:Image ID="imgUserLogo" runat="server" CssClass="imgLogo" />   
                                    </td>
                                </tr>

                                <tr>
                                    <td class="td-label">联系人:</td>
                                    <td><asp:Label ID="lblRegisteredContact" runat="server" /></td>
                                </tr>
                                <tr>
                                    <td class="td-label">电话:</td>
                                    <td><asp:Label ID="lblRegisteredPhone" runat="server" /></td>
                                </tr>
                                <tr>
                                    <td class="td-label">Email:</td>
                                    <td><asp:Label ID="lblRegisteredEmail" runat="server" /></td>
                                </tr>
                                <tr>
                                    <td class="td-label">城市:</td>
                                    <td><asp:Label ID="lblRegisteredCity" runat="server" /></td>
                                </tr>
                            </table>
                        </asp:Panel>
                    </ContentTemplate>
                </asp:UpdatePanel>  
                <div id="preview-top-btns"> 
                    <asp:LinkButton ID="btnSubmit" runat="server" Text="发 布" OnClick="btnSubmit_Click" class="btnSubmit" />  
                </div>
            </div>          
            <div class="clear"></div>
        </div>
    </div>
</asp:Content>
